<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring3-3.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
    <head th:include="template :: header" />
    <body th:onload="${'REPORT.runReport('''+reportViewUrl+''');'}">
        <div class="container-fluid">
            <div th:substituteby="template :: nav"/>
            <div class="span3">
                <ul class="bs-docs-sidenav outside-list">
                    <li class="list-header">
                        <input class="center input-large search-query" placeholder="search..." type="text" id="searchReport" value="" />
                    </li>
                    <li>
                        <ul id="listReport" class="bs-docs-sidenav inside-list" >
                            <li th:name="${rpt.reportId}" th:each="rpt : ${report}" 
                                th:onclick="${'REPORT.runReport('''+viewUrl+rpt.reportId+''');'}"  
                                th:text="${rpt.reportName}" 
                                th:title="${rpt.reportDescription}">
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="control-group" >
                <div class="report-viewer" id="success-reportView"/>
                <!--<a class="btn btn-info" style="margin-left: 300px;">View Full Report</a>-->
            </div>

        </div>
        <script th:inline="javascript">
            REPORT = {
                runReport: function(reportUrl) {
                    jQuery.ajax({
                        url: reportUrl,
                        success: function(data) {
                            jQuery('#success-reportView').html(data);
                        }
                    });
                }};
            (function($) {
                jQuery.expr[':'].Contains = function(a, i, m) {
                    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
                };
                $('#searchReport').change(function() {
                    var filter = $(this).val();
                    if (filter) {
                        $('#listReport').find('li:not(:Contains(' + filter + '))').slideUp(100);
                        $('#listReport').find('li:Contains(' + filter + ')').slideDown(100);
                    } else {
                        $('#listReport').find('li').slideDown(100);
                    }
                })
                        .keyup(function() {
                    // fire the above change event after every letter
                    $(this).change();
                });
            }(jQuery));

        </script>
    </body>
</html>